<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<link rel="stylesheet" href="css/scheduler.mod.css" type="text/css" media="screen" title="Scheduler">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins/jquery.autocomplete.js"></script>


<title>Scheduler Module</title>
</head>
<body>
<div id="wrapper">
<div class="ui-scheduler-control">
<img alt="Schedule" title="Schedule Meeting" src="graphics/schedule.gif"> <img alt="[-]" title="Zoom Out"  src="graphics/zoomout.gif"> <img alt="[+]" title="Zoom In" src="graphics/zoomin.gif">
</div>
<table class="ui-scheduler" border="1" cellspacing="0" cellpadding="0">
<thead class="ui-scheduler-time-range"><tr>
	<th>Enter name:<br><input id="qname" type="text"></th>
	<th class="ui-scheduler-time-slot">12AM-1AM</th>
	<th class="ui-scheduler-time-slot">1AM-2AM</th>
	<th class="ui-scheduler-time-slot">2AM-3AM</th>
	<th class="ui-scheduler-time-slot">3AM-4AM</th>
	<th class="ui-scheduler-time-slot">4AM-5AM</th>
	<th class="ui-scheduler-time-slot">5AM-6AM</th>
	<th class="ui-scheduler-time-slot">6AM-7AM</th>
	<th class="ui-scheduler-time-slot">7AM-8AM</th>
	<th class="ui-scheduler-time-slot">8AM-9AM</th>
	<th class="ui-scheduler-time-slot">9AM-10AM</th>
	<th class="ui-scheduler-time-slot">10AM-11AM</th>
	<th class="ui-scheduler-time-slot">11AM-12PM</th>
</tr>
</thead>
<tbody class="ui-scheduler-avail">
<tr class="ui-scheduler-avail-user">
    <td><span class="ui-scheduler-attendee" id="jdoe@no.com">John Doe</span></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</tbody></table>
</div>

<script type="text/javascript">
var stime=null,etime;

$("#qname").autocomplete("autocomplete.php");

$(".ui-scheduler-control img[alt=Schedule]").click(function () {
    console.debug("Attendee(s):")
    console.debug($(".ui-scheduler-attendee"));
    var times=$(".ui-scheduler-time-slot");
    console.debug("Time: "+times.get(stime).innerHTML+" - "+times.get(etime).innerHTML);

});


$(".ui-scheduler-time-slot").click(function (e) {
    var idx=$(".ui-scheduler-time-slot").index(this);
    if ( etime!=null&&etime!=stime ) {
        stime=null;
        etime=null;
    }
    if ( stime==null ) {
        stime=idx;
        etime=idx;
    } else if ( stime>idx ) {
        etime=stime;
        stime=idx;
    } else {
        etime=idx;
    }
    $(".ui-scheduler-time-slot,.ui-scheduler-avail-user td").css("backgroundColor","");
    $(".ui-scheduler-time-slot").slice(stime, etime+1).css("backgroundColor", "#CCC");
    $(".ui-scheduler-avail-user td").slice(stime+1,etime+2).css("backgroundColor", "#CCC");
});
</script>
</body>
</html>
